<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - postprocessing - unreal bloom</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #fff;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				background-color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 0px;
				width: 100%;
				padding: 5px;
			}
			#info p {
				max-width: 600px;
				margin-left: auto;
				margin-right: auto;
				padding: 0 2em;
			}
			a {
				color: #2983ff;
			}
		</style>
	</head>

	<body>

		<div id="container"></div>

		<div id="info">
			<!-- <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
			<p>
				This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur them
				with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips, this bloom
				is better in quality and performance.
			</p>
			Model: <a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Primary Ion Drive</a> by
			<a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a>, CC Attribution. -->
		</div>

		<!-- <script src="../build/three.js"></script> -->
        <script src="../src/three.js"></script>
		<!-- <script src="js/libs/stats.min.js"></script> -->
        <!-- <script src="js/libs/dat.gui.min.js"></script> -->
        <script src="../src/OrbitControls.js"></script>
		<!-- <script src="js/controls/OrbitControls.js"></script> -->
		<!-- <script src="js/loaders/GLTFLoader.js"></script> -->
        <script src="../src/libs/GLTFLoader.js"></script>
        <!-- <script src="js/postprocessing/EffectComposer.js"></script> -->
        <script src="../src/libs/EffectComposer.js"></script>
        <!-- <script src="js/postprocessing/RenderPass.js"></script> -->
        <script src="../src/libs/RenderPass.js"></script>
        <!-- <script src="js/postprocessing/ShaderPass.js"></script> -->
        <script src="../src/libs/ShaderPass.js"></script>
        <!-- <script src="js/shaders/CopyShader.js"></script> -->
        <script src="../src/libs/CopyShader.js"></script>
        <!-- <script src="js/shaders/LuminosityHighPassShader.js"></script> -->
        <script src="../src/libs/LuminosityHighPassShader.js"></script>
		<!-- <script src="js/postprocessing/UnrealBloomPass.js"></script> -->
        <script src="../src/libs/UnrealBloomPass.js"></script>
		<script>
			var scene, camera, controls, pointLight, stats;
			var composer, renderer, mixer;
			var params = {
				exposure: 1,
				bloomStrength: 0.5,
				bloomThreshold: 0.58,
				bloomRadius: 1
			};
			var clock = new THREE.Clock();
			var container = document.getElementById( 'container' );
			// stats = new Stats();
			// container.appendChild( stats.dom );
			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
            // renderer.setClearColor(new THREE.Color(0xEEEEEE))
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.toneMapping = THREE.ReinhardToneMapping;
			container.appendChild( renderer.domElement );

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
			camera.position.set( - 5, 5, - 3.5 );
			scene.add( camera );

			controls = new THREE.OrbitControls( camera, renderer.domElement );
			controls.maxPolarAngle = Math.PI * 0.5;
			controls.minDistance = 1;
			controls.maxDistance = 10;

             /**
             * 光源设置
             */
            // 方向光1
            var directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
            directionalLight.position.set(400, 200, 300);
            scene.add(directionalLight);
            // // 方向光2
            // var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.9);
            // directionalLight2.position.set(-400, -200, -300);
            // scene.add(directionalLight2);
            // //环境光
			// var ambient = new THREE.AmbientLight(0xffffff, 0.6);
            // scene.add(ambient);

			scene.add( new THREE.AmbientLight( 0x404040 ) );
			pointLight = new THREE.PointLight( 0xffffff, 1 );
			camera.add( pointLight );

			var renderScene = new THREE.RenderPass( scene, camera );
			var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
			bloomPass.threshold = params.bloomThreshold;
			bloomPass.strength = params.bloomStrength;
			bloomPass.radius = params.bloomRadius;
			composer = new THREE.EffectComposer( renderer );
			composer.setSize( window.innerWidth, window.innerHeight );
			composer.addPass( renderScene );
			composer.addPass( bloomPass );

			// new THREE.GLTFLoader().load( 'PrimaryIonDrive.glb', function ( gltf ) {
			// 	var model = gltf.scene;
			// 	scene.add( model );
			// 	// Mesh contains self-intersecting semi-transparent faces, which display
			// 	// z-fighting unless depthWrite is disabled.
			// 	var core = model.getObjectByName( 'geo1_HoloFillDark_0' );
			// 	core.material.depthWrite = false;
			// 	mixer = new THREE.AnimationMixer( model );
			// 	var clip = gltf.animations[ 0 ];
			// 	mixer.clipAction( clip.optimize() ).play();
			// 	animate();
			// } );
            animate();
            var sphereGeometry = new THREE.SphereGeometry(2,12,12)
            var sphereMat = new THREE.MeshPhongMaterial()
            // var sphereMat = new THREE.MeshBasicMaterial({color:0xEEEEEE})
            scene.add(new THREE.Mesh(sphereGeometry,sphereMat))

			// var gui = new dat.GUI();
			// gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
			// 	renderer.toneMappingExposure = Math.pow( value, 4.0 );
			// } );
			// gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
			// 	bloomPass.threshold = Number( value );
			// } );
			// gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
			// 	bloomPass.strength = Number( value );
			// } );
			// gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {
			// 	bloomPass.radius = Number( value );
			// } );

			window.onresize = function () {
				var width = window.innerWidth;
				var height = window.innerHeight;
				camera.aspect = width / height;
				camera.updateProjectionMatrix();
				renderer.setSize( width, height );
				composer.setSize( width, height );
			};
			function animate() {
				requestAnimationFrame( animate );
				const delta = clock.getDelta();
				// mixer.update( delta );
				// stats.update();
				composer.render();
			}
		</script>

	</body>

</html>